<template>
  <div>

    <el-button type="primary" @click="clickCreateNewIterter" size="small">添加需求</el-button>
    <el-dialog title="添加需求" :visible.sync="createnewIteraterflag">
      <el-form ref="form" :model="iteraterBasedate" label-width="80px">
        <el-form-item label="项目名">
          <el-select v-model="iteraterBasedate.projectName" placeholder="请选择">
            <el-option v-for="(value,index) in projectlist" :label="value.name" :value="value.name"
                       :key="value.name"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="迭代名称">

          <el-input v-model="iteraterBasedate.name"></el-input>
        </el-form-item>

        <!--   <el-form-item label="完成时间">
             <el-date-picker type="date" placeholder="选择日期" v-model="iteraterBasedate.demand.scheduleCompleteTime" style="width: 50%;" value-format="yyyy-MM-dd"></el-date-picker>
           </el-form-item>-->
        <el-form-item label="备注">
          <el-input v-model="iteraterBasedate.comment"></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="createnewIteraterflag = false">取 消</el-button>
        <el-button type="primary" @click="creadtenewIterater">确 定</el-button>
      </div>
    </el-dialog>
    <el-button type="primary" @click="clickAddEmployee" size="small">添加用户</el-button>
    <el-dialog title="添加用户" :visible.sync="createEmployeeflag">
      <el-form ref="form" :model="newEmployee" label-width="80px">
        <el-form-item label="用户名">

          <el-input v-model="newEmployee.name"></el-input>
        </el-form-item>
        <el-form-item label="用户类型">
          <el-select v-model="newEmployee.jobType" placeholder="请选择">
            <el-option v-for="(value,index) in jobTypeList" :label="value.name" :value="value.code"
                       :key="value.name"></el-option>
          </el-select>
        </el-form-item>



      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="createEmployeeflag = false">取 消</el-button>
        <el-button type="primary" @click="addEmployee">确 定</el-button>
      </div>
    </el-dialog>

    <div class="main-wrap">
      <el-table :data="basedata.list" style="width:200%">
        <el-table-column type="expand">
          <template slot-scope="scope">
            <el-tabs tab-position="left" @tab-click="tabChange">
              <el-tab-pane label="需求" name="demand">
                <demandModule :demand="scope.row.demand" :iterationId="scope.row.id" :employees="employees"></demandModule>
              </el-tab-pane>
              <el-tab-pane label="研发" name="develop">研发{{scope.row.develop}}</el-tab-pane>
              <el-tab-pane label="测试" name ='test'>
                <div class="timepick">
                  <div style="float:left;width:49%;border:1px ">
                    <!-- v-if="!scope.row.test.editable"-->
                    <el-button type="primary"  size="mini"
                               @click="!scope.row.test.editable ?edit(scope.row.test,scope.index):updateTestInfo(scope.row)">{{!scope.row.test.editable ?'修改':'确认'}}
                    </el-button>
                    <!--<el-button type="primary" v-if="scope.row.test.editable" size="mini"
                               @click="updateTestInfo(scope.row)">确认
                    </el-button>-->
                    <div class="textstyle">测试人员：<span>
                   <!-- <el-tag :key="testperson" v-for="testperson in scope.row.test.tester" :closable="scope.row.test.editable" :disable-transitions="false" @close="deleteExector(testperson,scope.row.test.tester)">{{testperson}}</el-tag>
                    <input class='input_size' v-show="scope.row.test.editable" v-model="scope.row.test.tester.toString()" size="mini"  />-->
                    <ecectorShow :exectors="scope.row.test.workers" :editable="scope.row.test.editable"
                                 :employees="employees"></ecectorShow>
                  </span>
                    </div>
                      <datePick class="textstyle" name="测试时间" @dateChangeHandle="getChildDate($event,scope.row.test)" :date1="scope.row.test.scheduleTimeFrom" :date2="scope.row.test.scheduleTimeTo" :editable="scope.row.test.editable"></datePick>
                    <div class="textstyle">
                      测试进度：<span v-show="!scope.row.test.editable">{{scope.row.test.progress }}%</span>
                      <input class='input_size' v-show="scope.row.test.editable" v-model="scope.row.test.progress"
                             size="mini"/>
                    </div>
                    <div class="textstyle">
                      实际测试时间：
                      <el-date-picker
                        v-model="scope.row.test.practiceTimeFrom"
                        type="date"
                        disabled
                        value-format="yyyy-MM-dd HH:mm:ss"
                        size="mini"
                        placeholder="选择日期">
                      </el-date-picker>
                      至
                      <el-date-picker
                        v-model="scope.row.test.practiceTimeTo"
                        type="date"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        disabled
                        size="mini"
                        placeholder="选择日期">
                      </el-date-picker>
                    </div>
                    <div class="textstyle">测试用例：<span v-show="!scope.row.test.editable">{{scope.row.test.testCaseURL  }}</span>
                      <input class='input_size' v-show="scope.row.test.editable" v-model="scope.row.test.testCaseURL"
                             size="mini"/></div>
                    <div class="textstyle">冒烟用例：<span v-show="!scope.row.test.editable">{{scope.row.test.quickTestCaseURL  }}</span>
                      <input class='input_size' v-show="scope.row.test.editable" v-model="scope.row.test.quickTestCaseURL"
                             size="mini"/></div>
                    <div class="textstyle">风险点：<span v-show="!scope.row.test.editable">{{scope.row.test.riskPoint  }}</span>
                      <input     type='textarea' autosize class='input_size' v-show="scope.row.test.editable" v-model="scope.row.test.riskPoint"
                                 size="mini"/></div>
                  </div>
                  <tasksModule :tasks="scope.row.test.tasks" :employees="employees" :ownNo="scope.row.test.testNo"></tasksModule>
                </div>

              </el-tab-pane>
              <el-tab-pane label="缺陷" name="bug">

                <bugModule :iterantionInfo="scope.row" :employees="employees"></bugModule>
              </el-tab-pane>
            </el-tabs>
          </template>
        </el-table-column>
        <el-table-column type="index" width="50">
        </el-table-column>
        <el-table-column label="需求" >
          <template slot-scope="scope">
            <span>{{scope.row.demand.name}}</span>
            <!--<hr class="cell_dashed">
            <span>deadline:{{scope.row.demand.deadline || "暂无"}}</span>-->
          </template>
        </el-table-column>
        <el-table-column label="项目" prop="project">
          <template slot-scope="scope">
            <!--下面是角标-->
            <!--<el-badge :value="scope.row.postpone" class="badgeitem" size="mini">
              <span>{{scope.row.projectName}}</span>

            </el-badge>-->
            <span>{{scope.row.projectName}}</span>
          </template>
        </el-table-column>

        <el-table-column label="研发" >
          <template slot-scope="scope">
            <span>进度：{{scope.row.develop.progress || 0}}%</span>
            <span></span>
          </template>
        </el-table-column>
        <el-table-column label="测试" >
          <template slot-scope="scope">
            <span>进度：{{scope.row.test.progress || 0}}%</span>
          </template>
        </el-table-column>
        <el-table-column label="备注"  prop="comment"></el-table-column>
        <el-table-column label="状态"  :sortable="true" :sort-method="sortbystatus">
          <template slot-scope="scope">
            <!-- <el-button size="mini" @click="closeDemand(scope.row)" v-if="!scope.row.status">关闭需求</el-button>-->
            <el-dropdown @command="updateIteraerStatus($event,scope.row)" trigger="click">
                <span class="el-dropdown-link">
                 <li v-for="state in productstatus" v-show="state.value===scope.row.status">{{state.name}}
                   <i class="el-icon-arrow-down el-icon--right"></i></li>
                </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item v-for="(itemstatus,index) in productstatus" :command="itemstatus.value" :key="index">
                  {{itemstatus.name}}
                </el-dropdown-item>
              </el-dropdown-menu>

            </el-dropdown>


          </template>
        </el-table-column>
      </el-table>


    </div>

  </div>
</template>

<script>
  import  bugModule from './managerChildren/bugManager'
  import vue from 'vue'
  import ecectorShow from './managerChildren/ecectorShow'
  import tasksModule from './managerChildren/taskManager'
  import datePick from './managerChildren/datePick'
  import demandModule from './managerChildren/demandManager'
  import {
    getInteration, getIterationStatus, saveDemandInfo, saveDevelopInfo, saveTestInfo, saveIteration, getProjects, getemployees,savenewemployee,getUserJobType,
  } from '../../api/testmanager'

  export default {
    name: "Manager",
    data() {
      return {
       // employees:[],
        basedata: {},
        productstatus: [//0待评审1待开发，2开发中 3 待测试 4 测试中 5已完成

        ],
        employees: [],
        createnewIteraterflag: false,
        iteraterBasedate: {
          id: 0,
          projectName: '',
          status: 5,
          comment: '',
          name: '',
          demand: {
            name: '',
            type: 0,
            //scheduleCompleteTime:''
          }
        },
        projectlist: [],
        createEmployeeflag:false,
        jobTypeList:[],
        newEmployee:{
          id:0,
          name:'',
          jobType:'DEVELOPER'
        }
      }
    },
    methods: {
      tabChange(event){
        //console.log('===')
       // console.log(event)
      },
      clickAddEmployee(){
        this.createEmployeeflag = true
        this.getJobTypeList()
      },
      addEmployee(){
        savenewemployee(this.newEmployee)
          .then(res=>{
              this.newEmployee.name=''
              this.createEmployeeflag=false
            this.getEmplorers()
          }).catch(err=>{
          this.$alert(err.data, 'error')
        })
      },

      clickCreateNewIterter() {
        this.getprojcetList()
        this.createnewIteraterflag = true
      },
      getblurname(nameflag) {
        return `inputblur${nameflag}`
      },
      getEmplorers() {



          getemployees()
            .then(res => {
              this.employees = res.data

            }).catch(err => {
            this.$alert(err.data, 'error')
          })


        return this.employees

      },
      getChildDate(event, test){
        /*date1="scope.row.test.scheduleTimeFrom" :date2="scope.row.test.scheduleTimeT
        console.log(data);
        console.log(event);*/
        test.scheduleTimeFrom=event[0]
        test.scheduleTimeTo=event[1]
      },
      getprojcetList() {

        getProjects()
          .then(res => {
            this.projectlist = res.data
          }).catch(err => {
          this.$alert(err.data, 'error')
        })
      },
      getJobTypeList(){
        if (this.jobTypeList.length ==0){
          getUserJobType()
            .then(res=>{
              this.jobTypeList = res.data
            }).catch(err=>{
            this.$alert(err.data, 'error')
          })
        }

      },
      getbasedata() {
        getInteration()
          .then(res => {
            this.basedata = res.data
          }).catch(err => {
          this.$alert(err.data, 'error')
        })
      },
      getIteraterstatus() {
        getIterationStatus()
          .then(res => {
            this.productstatus = res.data
          }).catch(err => {
          this.$alert(err.data, 'error')
        })
      },

      edit(value2, index) {

        vue.set(value2, 'editable', true)
      },
     updateTestInfo(row) {
        vue.delete(row.test, 'editable')
        saveTestInfo(row.id,row.test)
          .then(res => {

          }).catch(err => {
          this.$alert(err.data, 'error')
        })
      },
      deleteExector(testperson, testers) {
        // console.log(JSON.stringify(testrow.tester))
        testers.splice(testers.indexOf(testperson), 1)

      },
      updateIteraerStatus($event, row) {
        console.log($event, "=======", JSON.stringify(row))

        vue.set(row, 'status', $event)//更改状态结果

        saveIteration(row)
          .then(res => {
            const h = this.$createElement
            this.$notify({
              title: 'success',
              message: h('i', {style: 'color:teal'}, '状态更改成功')
            })
          }).catch(err => {
          this.$alert(err.data, 'error')
          this.getbasedata()
        })

      },
      creadtenewIterater() {
        saveIteration(this.iteraterBasedate)
          .then(res => {
            this.getbasedata()
            this.createnewIteraterflag = false;
          }).catch(err => {
          this.$alert(err.data, 'error')
        })

      },
      sortbystatus(obj1, obj2) { ////0待评审1待开发，2开发中 3 待测试 4 测试中 -1已完成
        let val1 = obj1.status
        let val2 = obj2.status
        return val1 - val2
      },

    },
    mounted() {

      this.getIteraterstatus();
      this.getbasedata();
      this.getEmplorers();

    },
    components: {
      ecectorShow,
      tasksModule,
      datePick,
      bugModule,
      demandModule,
    }
  }
</script>

<style scoped>
  .el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
    /*border: 1px solid #8c939d ;*/
    border-radius: 5px;
  }

  .el-icon-arrow-down {
    font-size: 12px;
  }

  /*.main-wrap /deep/ .el-table__expanded-cell{*/
  /*padding: 0;*/
  /*}*/
  .main-wrap >>> .el-table__expanded-cell[class*="cell"] {
    padding: 0 !important;
  }

  .setelinput >>> .el-input {
    position: relative;
    display: inline-block;
    width: 50%
  }
  .timepick >>> .el-date-editor.el-input, .el-date-editor.el-input__inner{
    width:125px;
  }

  .cell_dashed {
    letter-spacing: -1px;
    color: #ddd;
  }

  .input_size {
    height: 20px;
    width: 50%;
    padding: 0px;
  }

  .badgeitem {
    margin-top: 10px;
    margin-right: 50px;
  }

  .textstyle {
    margin: 10px 10px 10px 0px;
    height: 25px;
  }


</style>
